<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid black;
        }
        th,td{
            border: 1px solid black;
        }
        #saveDom{
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        #saveDomContent{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 280px;
            height: 160px;
            background-color: wheat;
            text-align: center;
        }
    </style>
</head>
<body>


<div id="saveDom">

    <div id = "saveDomContent">
        <label for="id" hidden="hidden">id：</label><input id="id" type="text" placeholder="编号" hidden="hidden"/><br/>
        <label for="planCode">编号：</label><input id="planCode" type="text" placeholder="编号"/><br/>
        <label for="planName">名字：</label><input id="planName" type="text" placeholder="名字"/><br/>
        <button onclick="saveEntitySubmit()">保存</button>
    </div>

</div>


<table>
    <thead>
    <tr>
       <th colspan="4">
           <button onclick="saveEntity()">新增</button>
       </th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th colspan="2">操作</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>


<script type="text/javascript">



    function saveEntity(){
       document.getElementById('id').value = null;
       document.getElementById('planCode').value = null;
       document.getElementById('planName').value = null;
       document.getElementById('saveDom').style.display = 'block';
    }

    document.getElementById('saveDom').onclick = function (event){
        if (event.target === this){
            this.style.display = 'none';
        }
    }

    function saveEntitySubmit(){
        let id = document.getElementById('id').value;
        let planCode = document.getElementById('planCode').value;
        let planName = document.getElementById('planName').value;
        if (id == null || id === ''){
            fetch('http://127.0.0.1:8101/core/tPlan/saveEntity',{
                method:'post',
                headers:{
                    'Content-Type':'application/json'
                },
                body:JSON.stringify({
                    planCode:planCode,
                    planName:planName
                })
            }).then(response=>{
                return response.json()
            }).then(data=>{
                console.log(data);
                document.getElementById('saveDom').style.display = 'none';
                getPageList();
            });
        }else {
            fetch('http://127.0.0.1:8101/core/tPlan/updateEntity',{
                method:'put',
                headers:{
                    'Content-Type':'application/json'
                },
                body:JSON.stringify({
                    id:id,
                    planCode:planCode,
                    planName:planName
                })
            }).then(response=>{
                return response.json()
            }).then(data=>{
                console.log(data)
                document.getElementById('saveDom').style.display = 'none';
                //window.location.reload();
                getPageList();
            });
        }
    }

    function getPageList(){
        fetch('http://127.0.0.1:8101/core/tPlan/getPageList',{
            method:'post',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify({
                name:'张三'
            })
        }).then(response=>{
            return response.json()
        }).then(data=>{
            let result = data.result
            let tbody = document.getElementById('tbody')
            tbody.textContent = '';
            result.forEach(item=>{
                let tr = document.createElement('tr');
                let td1 = document.createElement('td');
                td1.innerText = item.planCode;
                let td2 = document.createElement('td');
                td2.innerText = item.planName;
                let td3 = document.createElement('td');
                let td3HtmlButtonElement = document.createElement('button');
                td3HtmlButtonElement.textContent = '删除';
                td3HtmlButtonElement.onclick = ()=>deleteEntity(item.id);
                td3.appendChild(td3HtmlButtonElement);
                let td4 = document.createElement('td');
                let td4HtmlButtonElement = document.createElement('button');
                td4HtmlButtonElement.textContent = '修改';
                td4HtmlButtonElement.onclick = ()=>updateEntity(item);
                td4.appendChild(td4HtmlButtonElement);
                let td5 = document.createElement('td');
                td5.style.display = 'none';
                td5.textContent = item.id;
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);
                tbody.appendChild(tr);
            })
        });
    }



    function deleteEntity(id){
        fetch('http://127.0.0.1:8101/core/tPlan/deleteEntity/'+id,{
            method:'delete',
            headers:{
                'Content-Type':'application/json'
            },
        }).then(response=>{
            return response.json()
        }).then(data=>{
            console.log(data)
            getPageList();
        });

    }
    function updateEntity(item){
        document.getElementById('id').value = item.id;
        document.getElementById('planCode').value = item.planCode;
        document.getElementById('planName').value = item.planName;
        document.getElementById('saveDom').style.display = 'block';

    }
    document.addEventListener('DOMContentLoaded',function (){
        getPageList();
    })


</script>

</body>
</html>